/*
====================================
file: _print.scss

    # GLOBAL STYLES
        1. Base Styling
        2. Links
        3. Typography
        4. Tables
            * Table Classes
        5. Lists
            * Lists: List Classes
        6. Code
            * Code-like Custom Styles
        7. Text-level semantics
            * Element Semantics: Blockquote Classes
        8. Display Elements
        9. Grouping content / Images
            * Images: Image Classes
            * Images: Half Width Images
            * Images: Two Column Images
            * Images: Three Column Images
        10. Helper Classes / Utilities

    # SECTIONS
        - Preamble
        - TOC
        - Boxes Styling

*/

// ----------------------------------
// # GLOBAL STYLES
// ----------------------------------

// ----------------------------------
// 1. Base Styling
html, body {
    margin: 0;
    padding: 0;
    border: none;
}
body {
    font-family: $sans-regular;
    font-size: $font-M;
    line-height: 1.4;
    background: $color-background;
    color: $color-foreground;
}

// ----------------------------------
// 2. Links
a {
    text-decoration: none;
    color: $color-foreground;
}

// ----------------------------------
// 3. Typography
h1 {
    font-family: $sans-bold;
    font-size: $font-XXL;
    margin: 3.5em 0 0.3em 0;
}
h2 {
    font-family: $sans-semibold;
    font-size: $font-XL;
    margin-top: 2em;
}
h3, h4, h5, 
section[data-type="sect2"] h2,
section[data-type="sect3"] h2,
section[data-type="sect4"] h2 {
    font-family: $sans-semibold;
    font-size: $font-L;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
}
h3, h4, h5, h6,
section[data-type="sect2"] h2,
section[data-type="sect3"] h2,
section[data-type="sect4"] h2 {
    line-height: 1.317em;
    margin: 1.6em 0 0.5em;
}
p {
    letter-spacing: 0.03em;
}

// ----------------------------------
// 4. Tables
table {
    font-family: $sans-regular;
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 3em 0;
    border: solid $color-light 1px;

    th, td {
        padding: 0.5em;
    }

    th {
        font-family: $sans-semibold;
        font-weight: normal;
        font-style: normal;
        border: solid $color-light 1px;
        background: $color-lightest;
    }

    td {
        border: solid $color-light 1px;
        p { margin: 0; }
    }
}

    // * Table Classes
    table {
        &.code, &.codewide {
            pre { font-size: $font-S; }
            td  { text-align: left; }
        }
        &.codewide {
            width: 110%;
            position: relative;
            left: -5%;
        }
    }


// ----------------------------------
// 5. Lists
dl {
    width: 105%;
    overflow: hidden;
    margin: 0;
    padding: 0;

    dt, dd {
        float: left;
        line-height: 1em;
        margin: 0 0 .5em 0;
    }
    dt {
        width: 35%;
    }
    dd {
        width: 65%;

        p {
            font-size: $font-M;
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
    }
}
ul, ol {
    li {
        p {
            margin: 0;
            padding: .2em 0;
        }
    }
    &:last-child {
        margin-bottom: 0;
    }
}

    // * Lists: List Classes
    .preface {
        width:100%;
        dt { width:15%; }
        dd { width:85%; }
    }


// ----------------------------------
// 6. Code
pre, tt, code {
    font-family: $monospace;
    margin: 0;
    padding: 0;
}

p code, li code {
    font-size: 0.9em;
}

pre {
    width: 100%;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

    // * Code-like Custom Styles
    .mono, .formula, .formula2 {
        font-family: $monospace;
        font-size: $font-S;
        font-weight: bold;
    }
    .formula  { margin-left: 2em; }
    .formula2 { margin-left: 8em; }


// ----------------------------------
// 7. Text-level semantics
em {
    font-family: $sans-regular-italic;
    font-style: normal;
    strong {
        font-family: $sans-bold-italic;
    }
}
strong {
    font-family: $sans-bold;
    font-weight: normal;
    em {
        font-family: $sans-bold-italic;
    }
}
blockquote {
    font-family: $serif;
    font-size: $font-M;
    font-style: italic;
    margin: 0 40px;
    line-height: 1.5;
}

    // * Element Semantics: Blockquote Classes
    blockquote[data-type="epigraph"] {
        margin: 0 0 3em 0;

        p {
            margin: 0;
            font-size: $font-L;
            line-height: 1.4;
            letter-spacing: 0;

            &[data-type="attribution"] {
                margin: .25em 0 0 1.5em;
                font-style: normal;
                font-size: $font-M;
            }
        }
    }

    blockquote {
        .attribution {
            display: block;
            font-style: normal;
            margin: .5em 0 0 1.5em;
            font-size: $font-S;
        }

        &.long-quote {
            margin: 0 0 3em 0;
            font-size: $font-L;
            line-height: 1.4;

            .attribution {
                font-size: $font-M;
            }
        }
    }


// ----------------------------------
// 8. Display Elements
section {
    clear: both;
}

// ----------------------------------
// 9. Grouping content / Images
figure {
    margin: 1em 0;

    figcaption {
        font-family: $serif;
        font-size: $font-S;
        font-style: italic;
        border: 0;
        margin-top: 2px;
        line-height: 12pt;
    }
    img {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

    // * Images: Image Classes
    .bella img {
        width: 25%;
    }

    .screenshot img {
        width: 100%;
        margin: 0;
        display: block;
        border: solid 1px $color-medium;
    }


    // * Images: Half Width Images
    .half-width,
    .half-width-right,
    .half-width-right-border {
        margin-top: 1.2em;
        margin-bottom: 1.2em;
        position: relative;
        width: 48%;
        @include box-sizing(border-box);
    }
    .half-width {
        float: left;
        margin-right: 2em;
    }
    .half-width-right,
    .half-width-right-border {
        float: right;
        margin-left: 2em;
    }
    .half-width-right-border img {
        border: 1px solid $color-medium;
    }

    // * Images: Two-Three Column Images
    figure[class^="two-col"],
    figure.three-col {
        position: relative;
        float: left;
        width: 50%;
        margin: 2em 0;
        padding-right: 1em;
        @include box-sizing(border-box);
        img { border: 1px solid $color-medium; }
    }
    figure.three-col { width: 33%; }

    figure.two-col-borderless {
        img { border: none; }
        figcaption {
            text-align: center;
            padding: .5em 0 0 0;
        }
    }


// ----------------------------------
// 10. Helper Classes / Utilities
.line-through {
    text-decoration: line-through;
}
.underline {
    text-decoration: underline;
}
.highlight {
    display: block;
    margin: 2em;
    padding: 1em;
    font-family: $sans-semibold-italic;
    font-size: $font-M;
    letter-spacing: 0;
    text-align: center;
    background: $color-lightest;
}
.bold {
    font-weight: bold;
}
.notetoself {
    color: $color-danger;
    font-weight: bold;
}



// ----------------------------------
// # SECTIONS
// ----------------------------------

// ----------------------------------
// - Preamble
#preamble {
    h1 {
        margin: 0 0 1em 0;
        font-size: ($font-XXL / 4) * 3; // XXL's three-fourths
    }
    p {
        margin: 0 0 .25em 0;
    }
}

// ----------------------------------
// - TOC
section[data-type="toc"] nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li { // Level 01
            font-family: $sans-bold;
            font-size: $font-XL;
            font-weight: normal;
            margin: 0;
            padding: .2em 0;

            a {
                display: block;
                position: relative;
                padding: 0 50px 0 0;
            }
            a[href]::after {
                content: target-counter(attr(href), page, decimal);
                position: absolute;
                bottom: 0;
                right: 0;
                min-width: 40px;
                text-align: right;
            }
            a + ul {
                page-break-before: avoid;
            }

            ul {
                margin: 0.25em 0 1em 2em;
                li { // Level 02
                    font-family: $sans-regular;
                    font-size: $font-M;
                    a {}

                    ul {
                        display: none;
                        margin: .5em 0 .5em 4em;
                        li { // Level 03
                            a { color: $color-dark; }
                        }
                    }
                }
            }
        }
    }

    > ul {
        width: 90%;

        > li > a {

            .chapter-number {
                display: inline-block;
                font-family: $sans-bold;
                font-size: $font-XL;
                font-weight: normal;
            }
            .chapter-number::after {
                content: ":";
            }
            .chapter-title {
                display: inline-block;
            }
        }

        > li > ul > li > a span.section-number {
            display: inline-block;
            min-width: 2em;
            font-family: $sans-regular-italic;
            color: $color-medium;
        }

        // Preface visible w/roman index
        li[data-toc-item="_preface"] {
            a[href]::after {
                content: target-counter(attr(href), page, lower-roman);
            }
        }
        li[data-toc-item="_further_reading"] span.section-number {
            display: inline-block;
            min-width: 2em;
            color: inherit;
            font-family: $sans-regular;
        }
    }
}

// ----------------------------------
// - Boxes Styling
// -- Exercises (.example), Projects (.tip), Breakout Boxes (.note)
div[data-type="note"], div[data-type="tip"] {
    h2 {
        font-family: $sans-semibold;
        font-size: $font-L;
        margin: 0 0 0.3em 0;
    }
}

    // ----------------------
    // Breakout Boxes (was .note)
    div[data-type="note"] {
        margin: 1.15em 0;
        padding: 1.4em 1.5em;
        background: $color-lightest;

        // TODO: Merge with .half-width (images)
        &.half-width {
            position: inherit;
            width: 50%;
            float: none;
            margin: 1.2em 2em 1.2em 0;
            @include box-sizing(border-box);
        }
    }

    div[data-type="note"] h2:first-child,
    div[data-type="note"] p:first-child {
        margin-top: 0;
    }
    div[data-type="note"] p:last-child {
        margin-bottom: 0;
    }


    // ----------------------
    // Exercises (.example)
    div[data-type="exercise"] {
        background: $color-dark;
        color: $color-lighter;
        padding: 1em 2em 1em 2em;
        margin: .5em 0 1.5em 0;

        h5 {
            color: $color-background;
            margin: 0 0 0.5em 0;
            text-align: right;
        }
        p:last-child {
            margin-bottom: 0;
        }
        figure:last-child {
            margin-bottom: 0;
        }
        a { color: $color-lighter; }

        .codesplit .pair {
            background: $color-medium;
        }

        .codesplit .pair.no-comment {
            background: transparent;
        }
    }

    // ----------------------
    // Projects (.tip)
    div[data-type="tip"] {
        background: $color-lightest;
        padding: 0.7em 1.5em;
        margin: 1.5em 0;
        padding: 2em 2em 1em 2em;
    }

    // ----------------------
    // Example Heders
    div[data-type="example"] h5 {
        display: block;
        clear: both;
        font-family: $sans-bold;
        font-size: $font-M;
        background: $color-lighter;
        padding: 0.7em 1em;
    }
